<template>
	<!-- 订单页的头部的卡片 -->
	<view>
		<view class="box">
			<view class="content">
				<view class="content_title">
					<text v-if="str==1">待付款</text>
					<text v-if="str==2">待自提</text>
					<text v-if="str==3">已完成</text>
					<text v-if="str==4">待退款</text>
					<text v-if="str==5">已取消</text>
					<text v-if="str==6">备餐</text>
					<text v-if="str==7">待取单</text>
					<text v-if="str==8">待取单</text>
					<text v-if="str==9">已退款</text>
				</view>
				<view class="content_main" v-if="isSeat">
					<view class="content_main_1">
						桌号
					</view>
					<view class="content_main_4">
						<span style="padding:10rpx 14rpx;" v-for="(item,index) in  seat"
							:key="index">{{item.seat_title }}</span>

					</view>

				</view>
				<view class="content_main" v-else>
					<view class="content_main_1">
						取餐号
					</view>
					<view class="content_main_2">
						{{code}}
					</view>
					<view class="content_main_3">
						请向商家出示取餐号
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "orderblock",
		props: ["code", "str", 'isSeat', 'seat'],
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 660rpx;
		background: #FFFFFF;
		border-radius: 18rpx;
		margin: 20rpx auto;
		padding: 0 20rpx;
		min-height: 280rpx;

		.content {
			width: 605rpx;
			margin: 0 auto;

			.content_title {
				text-align: center;
				padding: 21rpx 0;
				border-bottom: 1rpx solid #E3E3E3;
			}

			.content_main {
				text-align: center;

				.content_main_1 {
					font-size: 24rpx;
					font-weight: 400;
					color: #333333;
					margin-top: 30rpx;
				}

				.content_main_2 {
					font-size: 40rpx;
					font-weight: 400;
					color: #00C4FF;
					padding: 10rpx 0;
				}

				.content_main_4 {
					font-size: 48rpx;
					font-weight: 400;
					color: #00C4FF;
					padding: 10rpx 0 0;
				}

				.content_main_3 {
					font-size: 24rpx;
					font-weight: 400;
					color: #5F5F5F;
				}
			}
		}
	}
</style>